<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<script>
// manages  own dependencies
var CLOSURE_NO_DEPS = true;
</script>

	<script src="./specview.js"></script>
	<script src="../../specviewTest/data/molfile.js"></script>
	
	<script>
		function loadMolecule() {
		var idx= document.getElementById('selectBox').value;
		var molfile=sdfs[idx];
		   var mol=specview.io.mdl.readMolfile(molfile);
		   editor.setModels([mol]);
		}
	</script>
	
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Display demo with Google closure compile Javascript</title>

	<link rel="stylesheet" href="../../css/specview.css" />
	<link rel="stylesheet" href="../../css/demo.css" />
	</head>
	
	    <body>
	        <fieldset style="width: 600px">
		        <p>
		        <label id="selectMolecule">Select a molecule to render: </label>
		        <p>
				<select id="selectBox" onChange="loadMolecule()">
					<option selected="selected" value="0">A</option>
					<option value="1">B</option>
					<option value="2">C</option>
					<option value="3">D</option>
					<option value="4">E</option>
					<option value="6">F</option>
					<option value="7">G</option>
					<option value="8">H</option>
					<option value="9">I</option>
					<option value="10">J</option>
					<option value="11">K</option>
					<option value="12">L</option>
					<option value="13">M</option>
					<option value="14">N</option>
					<option value="15">O</option>
					<option value="16">P</option>
					<option value="17">Q</option>
                    <option value="5">R</option>

				</select> 
				<legend>
		            <h1>Molecule viewer</h1>
		        </legend> 
		        <br>
		        <div id="moleculeContainer" style="height: 400px"></div>
	        </fieldset>
	
		    <script> 
			    var editor = new specview.controller.Controller(document.getElementById('moleculeContainer'),{background : {color : 'white'}});
			    editor.registerPlugin(new specview.controller.plugins.Highlight());
			    var sdfs = sdf.split("$$$$\n");
			    editor.setModels([specview.io.mdl.readMolfile(sdfs[0])]);
		    </script>
	    </body>
</html>
